<template>
  <view class="account-detail-page">
    <Navbar title="账号编辑" />
    
    <view class="detail-content">
      <!-- 账号信息区域 -->
      <view class="account-info">
        <view class="info-item">
          <text class="info-label">姓名</text>
          <input 
            class="info-input"
            :class="{ 'editing': isEditingName }"
            v-model="userInfo.name"
            :disabled="!isEditingName"
            placeholder="请输入姓名"
          />
          <text 
            v-if="!isEditingName" 
            class="action-text modify" 
            @click="startEditName"
          >
            修改
          </text>
          <text 
            v-else 
            class="action-text confirm" 
            @click="confirmEditName"
          >
            确认
          </text>
        </view>
        
        <view class="info-item">
          <text class="info-label">手机号</text>
          <input 
            class="info-input"
            :class="{ 'editing': isEditingPhone }"
            v-model="userInfo.phone"
            :disabled="!isEditingPhone"
            placeholder="请输入手机号"
            maxlength="11"
          />
          <text 
            v-if="!isEditingPhone" 
            class="action-text modify" 
            @click="startEditPhone"
          >
            修改
          </text>
          <text 
            v-else 
            class="action-text confirm" 
            @click="confirmEditPhone"
          >
            确认
          </text>
        </view>
        
        <view class="info-item">
          <text class="info-label">密码</text>
          <text class="info-value">{{ userInfo.password }}</text>
          <text class="action-text modify" @click="showPasswordPopup">修改</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">身份</text>
          <view class="role-selector" @click="showRolePicker = true">
            <view class="role-selector-content">
              <image 
                class="role-icon" 
                src="/static/img/minePages/arrow-down.png" 
                mode="widthFix"
              />
              <text class="role-text">{{ roleLabel }}</text>
            </view>
          </view>
          <view class="empty-action"></view>
        </view>
        
        <!-- 角色选择器 -->
        <tn-picker
          v-model:open="showRolePicker"
          :data="rolePickerData"
          :model-value="roleValue"
          :immediate-change="false"
          :mask="true"
          :show-cancel="false"
          confirm-color="#1ec8e1"
          label-key="label"
          value-key="value"
          @confirm="onRoleConfirm"
        />
        
        <view class="info-item">
          <text class="info-label">辖区</text>
            <view class="area-selector">
            <scroll-view class="area-scroll" scroll-x>
              <view class="area-list">
                <view 
                  v-for="(area, index) in userInfo.areas" 
                  :key="index"
                  class="area-item"
                  @longpress="deleteArea(index)"
                >
                  <view class="area-item-content">
                    <image 
                      class="area-icon" 
                      src="/static/img/minePages/location-pin.png" 
                      mode="widthFix"
                    />
                    <view class="area-text-container">
                      <text 
                        class="area-text"
                        :style="getScrollStyle(area.regionName, index)"
                      >
                        {{ area.regionName }}
                      </text>
                    </view>
                  </view>
                </view>
            </view>
            </scroll-view>
          </view>
          <text class="action-text modify" @click="addArea">添加</text>
        </view>
        
        <!-- 区域选择器 -->
        <tn-picker
          v-model:open="showAreaPicker"
          :data="areaPickerData"
          :model-value="areaValue"
          :immediate-change="false"
          :mask="true"
          :show-cancel="false"
          confirm-color="#1ec8e1"
          label-key="label"
          value-key="value"
          @confirm="onAreaConfirm"
        />
      </view>
      
      <!-- 模块管理区域 -->
      <view class="module-section">
        <view class="section-divider">
          <text class="divider-text">模块管理</text>
        </view>
        
        <view class="module-list">
          <view class="module-item">
            <text class="module-label">报表生成</text>
            <tn-switch 
              v-model="moduleSettings.report"
              active-color="#268DD9"
              inactive-color="rgba(255, 255, 255, 0.2)"
              size="sm"
            />
          </view>
          
          <view class="module-item" v-if="userInfo.role === 1">
            <text class="module-label">审核告警报告</text>
            <tn-switch 
              v-model="moduleSettings.audit"
              active-color="#268DD9"
              inactive-color="rgba(255, 255, 255, 0.2)"
              size="sm"
            />
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <view class="action-row">
        <button class="action-btn logout-btn" @click="logout">
          注销
        </button>
        <button 
          class="action-btn confirm-btn" 
          :class="{ 'disabled': isAnyFieldEditing }"
          :disabled="isAnyFieldEditing"
          @click="confirm"
        >
          确定
        </button>
      </view>
    </view>
    
    <!-- 密码修改弹窗 -->
    <tn-popup 
      v-model="showPasswordDialog" 
      open-direction="center"
      width="600"
      bg-color="#172869"
      radius="20"
    >
      <view class="password-popup">
        <view class="popup-header">
          <text class="password-tips">密码长度8-20位，必须包含数字和字母</text>
        </view>
        <view class="popup-content">
          <view class="input-group">
            <text class="input-label">新密码</text>
            <input 
              class="password-input"
              v-model="passwordForm.newPassword"
              type="text"
              placeholder="请输入新密码"
              maxlength="20"
              @input="onPasswordInput"
            />
          </view>
          
          <!-- 错误提示 -->
          <view class="error-tip" v-if="passwordError">
            <text class="error-text">{{ passwordError }}</text>
          </view>
        </view>
        
        <view class="popup-footer">
          <view class="popup-btn confirm-btn" @click="confirmPasswordChange">
            确认
          </view>
        </view>
      </view>
    </tn-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import Navbar from '@/components/Navbar.vue';
import { createRequest } from '@/utils/request';
import { validatePhone, validateName, validatePassword, showValidationError } from '@/utils/validators';

// 用户ID（从路由参数获取）
const userId = ref('');

// 用户信息
const userInfo = ref({
  id: '',                         
  name: '',                       
  phone: '',                      
  password: '',                   
  role: '',                       
  areas: [] // 存储区域对象数组：{id: string, regionName: string}
});

// 新增的区域数据（用于提交）
const newAreas = ref([]);

// 模块设置状态
const moduleSettings = ref({});

// 姓名编辑状态
const isEditingName = ref(false);

// 手机号编辑状态
const isEditingPhone = ref(false);

// 密码修改弹窗状态
const showPasswordDialog = ref(false);
const passwordForm = ref({
  newPassword: ''
});
const passwordError = ref(''); // 密码验证错误信息

// 角色选择器状态
const showRolePicker = ref(false);
const rolePickerData = ref([
  { label: '管理人员', value: 1 },
  { label: '现场人员', value: 2 }
]);
const roleValue = ref([userInfo.value.role]);
const roleLabel = ref(userInfo.value.role);

// 区域数据管理
const areaData = ref([]);
const areaDataLoaded = ref(false);

// 辖区选择器状态
const showAreaPicker = ref(false);
const areaValue = ref([]);
const areaLabel = ref('');

// 区域选择器数据 - 级联选择器格式
const areaPickerData = computed(() => {
  if (!areaData.value || areaData.value.length === 0) {
    return [];
  }
  
  // 构建级联选择器数据格式
  const buildCascadeData = (areas) => {
    return areas.map(area => {
      const item = {
        label: area.regionName,
        value: area.id
      };
      
      // 只有当有子级且子级不为空时才添加children属性
      if (area.children && area.children.length > 0) {
        item.children = buildCascadeData(area.children);
      }
      
      return item;
    });
  };
  
  return buildCascadeData(areaData.value);
});

// 判断是否有任何字段处于编辑状态
const isAnyFieldEditing = computed(() => {
  return isEditingName.value || isEditingPhone.value || showPasswordDialog.value;
});

// 当前编辑的辖区索引
const currentEditingAreaIndex = ref(-1);

// 文本滚动相关
const scrollTimers = ref({});
const scrollPositions = ref({});

// 获取文本实际宽度
const getTextWidth = (text) => {
  // 使用更精确的字符宽度计算
  let totalWidth = 0;
  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    // 中文字符约16rpx，英文字符约8rpx，数字约10rpx
    if (/[\u4e00-\u9fa5]/.test(char)) {
      totalWidth += 16; // 中文字符
    } else if (/[0-9]/.test(char)) {
      totalWidth += 10; // 数字
    } else {
      totalWidth += 8; // 英文字符和其他
    }
  }
  return totalWidth;
};

// 判断文本是否超出容器宽度
const isTextOverflow = (text) => {
  const textWidth = getTextWidth(text);
  const containerWidth = 182; // 容器宽度（240rpx - 24rpx内边距 - 28rpx图标 - 6rpx间距）
  return textWidth > containerWidth;
};

// 获取滚动样式
const getScrollStyle = (text, index) => {
  if (!isTextOverflow(text)) {
    return {};
  }
  
  // 使用JavaScript控制的滚动位置
  const scrollPosition = scrollPositions.value[index] || 0;
  
  return {
    transform: `translateX(${scrollPosition}rpx)`,
    transition: 'none' // 移除过渡效果，让滚动更流畅
  };
};

// 开始文本滚动
const startTextScroll = (text, index) => {
  if (!isTextOverflow(text) || scrollTimers.value[index]) {
    return;
  }
  
  const textWidth = getTextWidth(text); // 获取实际文本宽度
  const containerWidth = 182; // 容器宽度（240rpx - 24rpx内边距 - 28rpx图标 - 6rpx间距）
  const scrollDistance = textWidth - containerWidth + 90; // 滚动距离 + 90rpx缓冲，确保文本完全滚动出容器
  
  let currentPosition = 0;
  
  scrollTimers.value[index] = setInterval(() => {
    currentPosition -= 1; // 每次移动1rpx，更平滑
    if (currentPosition <= -scrollDistance) {
      currentPosition = 0; // 重置到开始位置
    }
    
    scrollPositions.value[index] = currentPosition;
  }, 30); // 每30ms更新一次，更流畅
};

// 停止文本滚动
const stopTextScroll = (index) => {
  if (scrollTimers.value[index]) {
    clearInterval(scrollTimers.value[index]);
    delete scrollTimers.value[index];
  }
  delete scrollPositions.value[index];
};





// 页面加载时获取用户数据和区域数据
onLoad(async (options) => {
  // 获取用户ID（从路由参数）
  userId.value = options.userId;
  
  if (userId.value) {
    // 获取用户详细信息
    await fetchUserInfo(userId.value);
  } else {
    uni.showToast({ title: '用户ID不能为空', icon: 'none' });
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
    return;
  }
  
  // 获取区域数据
  await fetchAreaData();
});

// 页面卸载时清理定时器
onUnload(() => {
  Object.keys(scrollTimers.value).forEach(index => {
    stopTextScroll(parseInt(index));
  });
});

// 获取区域数据
const fetchAreaData = async () => {
  try {
    const response = await createRequest(`/region/getRemainingHierarchy?userId=${userId.value}`);
    
    if (response && response.code === 200 && response.data && Array.isArray(response.data)) {
      // 对数据进行加工，只保留需要的属性，并添加"全部"选项
      const processAreaData = (areas) => {
        return areas.map(area => {
          const processedArea = {
            id: area.id,
            regionName: area.regionName
          };
          
          // 如果有子区域，递归处理
          if (area.child && area.child.length > 0) {
            const processedChildren = processAreaData(area.child);
            // 在子区域数组前面添加"全部"选项
            processedArea.children = [
              {
                id: 'all',
                regionName: '全部'
              },
              ...processedChildren
            ];
          }
          
          return processedArea;
        });
      };
      
      areaData.value = processAreaData(response.data);
      areaDataLoaded.value = true;
    } else {
      throw new Error(response?.msg || '接口返回数据格式错误');
    }
  } catch (error) {
    console.error('获取区域数据失败:', error);
  }
};

// 获取用户信息
const fetchUserInfo = async (userId) => {
  try {
    // 向后端发送获取用户信息请求
    const response = await createRequest(`/user/info/normal?userId=${userId}`);

    if (response && response.data) {
      const userData = response.data;
      
      // 将嵌套的区域数据转换为扁平化数组
      const flattenAreas = (areas, parentPath = '') => {
        let result = [];
        areas.forEach(area => {
          const currentPath = parentPath ? `${parentPath}-${area.regionName}` : area.regionName;
          
          // 添加当前区域（只添加叶子节点，避免重复显示）
          if (!area.child || area.child.length === 0) {
            result.push({
              id: area.id,
              regionName: currentPath
            });
          }
          
          // 递归处理子区域
          if (area.child && area.child.length > 0) {
            result = result.concat(flattenAreas(area.child, currentPath));
          }
        });
        return result;
      };
      
      // 将后端数据映射为前端需要的格式
      userInfo.value = {
        id: userData.id,
        name: userData.realName,
        phone: userData.mobile ,
        password: userData.password,
        role: userData.userType,
        areas: flattenAreas(userData.region || []),
      };
      
      // 更新相关的响应式数据
      roleValue.value = [userInfo.value.role];
      roleLabel.value = userData.userType === 1 ? '管理人员' : '现场人员';
      
      // 根据权限信息设置模块开关状态
      if (userData.permissionInfo) {
        const permissions = userData.permissionInfo;
        moduleSettings.value = {
          report: permissions.exportPermission || false,    // 报表生成权限
          audit: permissions.alertPermission || false       // 审核告警报告权限（仅管理人员显示）
        };
      } else {
        // 如果没有权限信息，根据角色设置默认值
        const isManager = userData.userType === 1;
        moduleSettings.value = {
          report: false,
          audit: isManager ? false : false // 现场角色不显示告警权限
        };
      }
      
      // 启动文本滚动
      setTimeout(() => {
        userInfo.value.areas.forEach((area, index) => {
          if (isTextOverflow(area.regionName)) {
            startTextScroll(area.regionName, index);
          }
        });
      }, 1000);
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
};

// 开始编辑姓名
function startEditName() {
  // 确保其他字段不在编辑状态
  if (isEditingPhone.value || showPasswordDialog.value) {
    uni.showToast({ title: '请先完成其他编辑', icon: 'none' });
    return;
  }
  isEditingName.value = true;
}



// 确认编辑姓名
function confirmEditName() {
  const name = userInfo.value.name.trim();
  
  // 使用验证函数验证姓名
  const validationResult = validateName(name, '姓名');
  if (!showValidationError(validationResult)) {
    return;
  }
  
  isEditingName.value = false;
}

// 开始编辑手机号
function startEditPhone() {
  // 确保其他字段不在编辑状态
  if (isEditingName.value || showPasswordDialog.value) {
    uni.showToast({ title: '请先完成其他编辑', icon: 'none' });
    return;
  }
  isEditingPhone.value = true;
}

// 确认编辑手机号
function confirmEditPhone() {
  const phone = userInfo.value.phone.trim();
  
  // 使用验证函数验证手机号
  const validationResult = validatePhone(phone);
  if (!showValidationError(validationResult)) {
    return;
  }
  
  isEditingPhone.value = false;
}

// 显示密码修改弹窗
function showPasswordPopup() {
  // 确保其他字段不在编辑状态
  if (isEditingName.value || isEditingPhone.value) {
    uni.showToast({ title: '请先完成其他编辑', icon: 'none' });
    return;
  }
  showPasswordDialog.value = true;
  passwordForm.value = { newPassword: '' };
  passwordError.value = ''; // 清空错误信息
}

// 监听密码输入框变化
function onPasswordInput() {
  // 当任意输入框为空时，隐藏错误提示
  if (!passwordForm.value.newPassword.trim()) {
    passwordError.value = '';
  }
}

// 确认密码修改
function confirmPasswordChange() {
  const newPassword = passwordForm.value.newPassword.trim();

  // 使用验证函数验证密码
  const validationResult = validatePassword(newPassword, '密码', 8, 20);
  if (!validationResult.isValid) {
    passwordError.value = validationResult.message || '密码验证失败';
    return;
  }

  // 密码格式验证（至少包含数字和字母）
  const hasNumber = /\d/.test(newPassword);
  const hasLetter = /[a-zA-Z]/.test(newPassword);
  
  if (!hasNumber || !hasLetter) {
    passwordError.value = '密码必须包含数字和字母';
    return;
  }

  // 暂存新密码到userInfo中
  userInfo.value.password = newPassword;
  
  // 关闭弹窗并清理状态
  showPasswordDialog.value = false;
  passwordForm.value = { newPassword: '' };
  passwordError.value = ''; // 清空错误信息
}

// 角色选择确认
function onRoleConfirm(value, item) {
  // item 是 Proxy 对象，包含 label 和 value 属性
  roleValue.value = [value];
  roleLabel.value = item.label;
  userInfo.value.role = value; // 存储数字值：1表示管理人员，2表示现场人员
  showRolePicker.value = false;
}

// 辖区选择确认
const onAreaConfirm = async (value, item) => {
  // value 是选中的 value 数组, item 是选中的对象数组
  areaValue.value = value;
  // 构建完整的区域路径显示文本
  const buildAreaPath = (items) => {
    if (!items || items.length === 0) return '';
    return items.map(item => item.label).join('-');
  };
  
  const selectedAreaPath = buildAreaPath(item);
  areaLabel.value = selectedAreaPath;
  
  // 处理"全部"选择逻辑
  const processAreaSelection = (items) => {
    let targetId = null;
    let targetRegionName = '';
    
    // 从外到内遍历，找到第一个"全部"
    for (let i = 0; i < items.length; i++) {
      const currentItem = items[i];
      const currentPath = i === 0 ? currentItem.label : targetRegionName + '-' + currentItem.label;
      
      if (currentItem.value === 'all') {
        // 找到"全部"，使用上一级的ID和路径
        targetId = items[i - 1].value;
        targetRegionName = i === 1 ? items[0].label : targetRegionName;
        break;
      } else {
        // 继续构建路径
        targetRegionName = currentPath;
        targetId = currentItem.value;
      }
    }
    
    return {
      id: targetId,
      regionName: targetRegionName
    };
  };
  
  const selectedArea = processAreaSelection(item);
  
  // 检查是否已存在相同的区域
  const isAreaExists = userInfo.value.areas.some(area => area.id === selectedArea.id);
  
  if (!isAreaExists) {
    // 添加到渲染数组（用于显示）
    userInfo.value.areas.push(selectedArea);
    
    // 添加到新增数组（用于提交）
    newAreas.value.push(selectedArea.id);
    uni.showToast({ title: '辖区已添加', icon: 'success' });
  } else {
    uni.showToast({ title: '该辖区已存在', icon: 'none' });
    return;
  }
  
  showAreaPicker.value = false;
};

// 添加辖区
function addArea() {
  // 重置所有相关状态
  currentEditingAreaIndex.value = -1; // 重置编辑状态
  areaValue.value = []; // 清空选择器的值
  areaLabel.value = ''; // 清空选择器的显示标签
  
  // 延迟一帧再打开选择器，确保状态重置完成
  showAreaPicker.value = true;
}

// 删除辖区
const deleteArea = async (index) => {
  const areaToDelete = userInfo.value.areas[index];
  uni.showModal({
    title: '确认删除',
    content: `确定要删除辖区"${areaToDelete.regionName}"吗？`,
    confirmColor: '#ff4757',
    success: async (res) => {
      if (res.confirm) {
        // 检查是否是新增的区域
        const isNewArea = newAreas.value.includes(areaToDelete.id);
        
        if (isNewArea) {
          // 删除新增区域 - 直接从newAreas数组中移除
          const newAreaIndex = newAreas.value.indexOf(areaToDelete.id);
          if (newAreaIndex !== -1) {
            newAreas.value.splice(newAreaIndex, 1);
          }
          // 从显示数据中删除
          userInfo.value.areas.splice(index, 1);
        } else {
          // 删除原有区域 - 需要发起后端请求
          try {
            // 向后端发送删除区域请求
            const response = await createRequest('/user/delete/regionperm', {
              data: { 
                userId: userId.value,
                regionId: areaToDelete.id 
              },
            });
            if (response && response.code === 200) {
              // 请求成功后，从前端数据中删除
              userInfo.value.areas.splice(index, 1);
            }
          } catch (error) {
            uni.showToast({ title: '删除失败，请重试', icon: 'none' });
          }
        }
      }
    }
  });
};

// 注销
const logout = async () => {
  uni.showModal({
    title: '确认注销',
    content: '确定要注销当前账号吗？此操作不可恢复。',
    confirmText: '确认注销',
    cancelText: '取消',
    confirmColor: '#ff4757',
    cancelColor: '#666',
    showCancel: true,
    success: async (res) => {
      if (res.confirm) {
        try {
          // 向后端发送注销请求
          const response = await createRequest('/user/deactivate', {
            data: {
              userId: userId.value
            }
          });

          if (response && response.code === 200) {
            uni.showToast({ title: '注销成功', icon: 'success' });
            setTimeout(() => {
              uni.navigateBack();
            }, 500);
          } else {
            throw new Error(response?.msg || '注销失败');
          }
        } catch (error) {
          uni.showToast({ title: '注销失败，请重试', icon: 'none' });
        }
      }
    },
    fail: (err) => {
      // 如果弹框失败，直接执行注销
      performLogout();
    }
  });
};

// 执行注销操作
const performLogout = async () => {
  try {
    const response = await createRequest('/user/deactivate', {
      data: {
        userId: userId.value
      }
    });

    if (response && response.code === 200) {
      uni.showToast({ title: '注销成功', icon: 'success' });
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    } else {
      throw new Error(response?.msg || '注销失败');
    }
  } catch (error) {
    console.error('注销失败:', error);
    uni.showToast({ title: '注销失败，请重试', icon: 'none' });
  }
};

// 确定
const confirm = async () => {

  try {
    // 根据角色类型设置权限
    const userType = userInfo.value.role; // 直接使用存储的数字值：1表示管理人员，2表示现场人员
    const isManager = userType === 1;
    
    // 根据角色类型设置默认权限
    let alertPermission = false;
    let addNewMonitorPermission = false;
    let publicAreaPermission = false;
    let accountManagePermission = false;
    let blackListPermission = false;
    let screenPermission = false;
    let keyDevicePermission = false;
    
    if (isManager) {
      // 非现场角色（管理人员）
      accountManagePermission = true;
      blackListPermission = true;
      screenPermission = true;
      addNewMonitorPermission = false;
      publicAreaPermission = false;
      keyDevicePermission = false;
      alertPermission = moduleSettings.value.audit || false; // 从页面设置获取
    } else {
      // 现场角色
      addNewMonitorPermission = true;
      publicAreaPermission = true;
      screenPermission = true;
      accountManagePermission = false;
      blackListPermission = false;
      alertPermission = false;
      keyDevicePermission = true;
    }
    
    // 提交所有暂存的用户信息修改
    const updateData = {
      userId: userId.value,
      userName: userInfo.value.name,
      mobile: userInfo.value.phone,
      password: userInfo.value.password,
      userType: userType,
      alertPermission: alertPermission,
      addNewMonitorPermission: addNewMonitorPermission,
      publicAreaPermission: publicAreaPermission,
      accountManagePermission: accountManagePermission,
      blackListPermission: blackListPermission,
      screenPermission: screenPermission,
      keyDevicePermission: keyDevicePermission,
      exportPermission: moduleSettings.value.report || false,
      regionIds: newAreas.value // 使用新增的区域ID数组
    };
    
    const response = await createRequest('/user/edit', {
      data: updateData,
    });

    if (response && response.code === 200) {
      uni.showToast({ title: '设置已保存', icon: 'success' });
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    } else {
      throw new Error(response?.msg || '保存失败');
    }

  } catch (error) {
    console.error('保存设置失败:', error);
    uni.showToast({ title: '保存失败，请重试', icon: 'none' });
  }
};
</script>

<style scoped lang="scss">
.account-detail-page {
  @include page-with-header;
  background: #172869;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.detail-content {
  flex: 1;
  padding: 40rpx;
}

.account-info {
  margin-bottom: 60rpx;
}

.info-item {
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 0;
  box-sizing: border-box;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 30rpx;
  flex: 1;
  text-align: left;
}

.info-value {
  color: #fff;
  font-size: 30rpx;
  flex: 3;
  text-align: center;
}

.info-input {
  color: #fff;
  font-size: 30rpx;
  flex: 3;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}

.info-input.editing {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
  text-align: left;
}

.info-input:disabled {
  color: #fff;
  opacity: 1;
}

.action-text {
  font-size: 28rpx;
  flex: 1;
  text-align: right;
  cursor: pointer;
}

.action-text.modify {
  color: #1ec8e1;
}

.action-text.confirm {
  color: #4CAF50;
}

.action-text.unbind {
  color: #ff4757;
}

.empty-action {
  flex: 1;
}

.role-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 3;
}
.role-selector-content {
  width: 170rpx;
  height: 42rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  justify-content: center;
}
.role-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 26rpx;
}

.role-icon {
  width: 28rpx;
}

.area-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 3;
  max-width: 400rpx;
}
.area-scroll {
  width: 100%;
  white-space: nowrap;
  padding: 10rpx 0;
}
.area-list {
  display: flex;
  gap: 3rpx;
  padding: 0 6rpx;
  flex-wrap: nowrap;
  align-items: center;
}
.area-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  padding: 0 12rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 30rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  width: 240rpx;
  flex-shrink: 0;
}
.area-item-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6rpx;
  width: 100%;
  overflow: hidden;
}
.area-icon {
  width: 28rpx;
  height: 28rpx;
  flex-shrink: 0;
}
.area-text-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.area-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 20rpx;
  white-space: nowrap;
  display: inline-block;
  transition: all 0.3s ease;
  will-change: transform;
  min-width: max-content;
  line-height: 1.2;
  vertical-align: middle;
}



.module-section {
  margin-bottom: 60rpx;
}

.section-divider {
  background: rgba(255, 255, 255, 0.1);
  padding: 20rpx 0;
  margin-bottom: 40rpx;
  text-align: center;
}

.divider-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 28rpx;
}

.module-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.module-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.module-label {
  color: #fff;
  font-size: 30rpx;
}

.bottom-actions {
  width: 100%;
  height: 168rpx;
  background: #071E51;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-row {
  display: flex;
  gap: 40rpx;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  width: 320rpx;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.98);
}

.logout-btn {
  background: linear-gradient(135deg, #ff6572 0%, #e23b43 100%);
  color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(255, 71, 87, 0.3);
}

.confirm-btn {
  background: linear-gradient(135deg, #279BD5 0%, #2264EB 100%);
  color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(30, 200, 225, 0.3);
}

.confirm-btn.disabled {
  background: linear-gradient(135deg, #666 0%, #444 100%);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  cursor: not-allowed;
}

.confirm-btn.disabled:active {
  transform: none;
}

/* 密码修改弹窗样式 */
.password-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40rpx;
  box-sizing: border-box;
}

.popup-header {
  text-align: center;
  margin-bottom: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.password-tips {
  color: rgba(255, 255, 255, 0.6);
  font-size: 24rpx;
}

.popup-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-bottom: 40rpx;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.input-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.password-input {
  color: #fff;
  font-size: 30rpx;
  background: rgba(255, 255, 255, 0.08);
  border: 1rpx solid rgba(255, 255, 255, 0.15);
  border-radius: 12rpx;
  padding: 28rpx 24rpx;
  height: 88rpx;
  box-sizing: border-box;
  transition: all 0.3s ease;
  outline: none;
}

.password-input:focus {
  border-color: #268DD9;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2rpx rgba(38, 141, 217, 0.2);
}

.password-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.error-tip {
  margin-top: 10rpx;
  padding: 10rpx 20rpx;
  background-color: rgba(255, 71, 87, 0.1);
  border: 1rpx solid rgba(255, 71, 87, 0.2);
  border-radius: 8rpx;
  display: flex;
  align-items: center;
}

.error-text {
  color: #ff4757;
  font-size: 24rpx;
}

.popup-footer {
  display: flex;
  justify-content: center;
  padding-top: 20rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
}

.popup-btn {
  height: 88rpx;
  width: 400rpx;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.popup-btn:active {
  transform: scale(0.98);
}

.popup-btn.confirm-btn {
  background: linear-gradient(135deg, #279BD5 0%, #2264EB 100%);
  color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(30, 200, 225, 0.3);
}

/* Picker组件样式优化 */
:deep(.uni-picker-view-mask) {
  background: transparent !important;
}

:deep(.tn-picker__content) {
  background: #172869 !important;
  border-radius: 20rpx 20rpx 0 0 !important;
}

:deep(.tn-picker__header) {
  background: #172869 !important;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1) !important;
}

:deep(.tn-picker__confirm) {
  color: #1ec8e1 !important;
}

:deep(.tn-picker__cancel) {
  color: rgba(255, 255, 255, 0.6) !important;
}

:deep(.tn-picker__title) {
  color: #fff !important;
}

:deep(.tn-picker-view__item) {
  color: #fff !important;
}

:deep(.tn-picker-view__item--selected) {
  color: #1ec8e1 !important;
}
</style> 